<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>

.header{
	background-color:#eee;
	height: 50px;
	
}

.middle{
	background-color: pink;
	margin: 0 200px 0 100px;
	height: 500px;
}

.left{
	background-color: lightgreen;
	width: 100px;
	margin-left: -100%;
	height: 500px;
}

.right{
	background-color: yellow;
	width: 200px;
	margin-left: -200px;
	height: 500px;
}

.footer{
	background-color:#eee;
	clear: both;
	height: 50px;
}

.show-center{
	display: flex;
	justify-content: center;
	align-items: center;
}

.left, .right{
	float: left;
}

.wrap{
	float: left;
	width: 100%;
		
}

</style>



</head>
<body>
	<div class="header show-center">头部区域</div>
	
		<div class="wrap">
			<div class="middle show-center">中间区域</div>
		</div>
		
		<div class="left show-center">左部区域</div>
		<div class="right show-center">右部区域</div>
		
	<div class="footer show-center">尾部区域</div>
</body>
</html>